<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>属于成县F6自己的赛尔号</title>
    <!-- <script src="https://cdn.tailwindcss.com"></script> -->
    <!-- 添加本地 CSS 引用 -->
    <link rel="stylesheet" href="output.css">

    <!-- <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet"> -->
    <!-- 替换原来的 Font Awesome 链接 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <!-- 替换为国内BootCDN的链接 -->
    <!-- <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> -->
    
    <!-- 配置Tailwind自定义颜色和字体 -->
    <!-- <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        fire: '#EF4444',
                        water: '#0EA5E9',
                        wind: '#8B5CF6',
                        thunder: '#F59E0B',
                        earth: '#10B981',
                        light: '#FBBF24',
                        dark: '#4C1D95',
                        hp: '#EF4444',
                        mp: '#3B82F6',
                        background: '#0F172A',
                        card: '#1E293B'
                    },
                    fontFamily: {
                        game: ['"Press Start 2P"', 'cursive', 'sans-serif'],
                        sans: ['Inter', 'system-ui', 'sans-serif']
                    }
                }
            }
        }
    </script> -->
    
    <style type="text/tailwindcss">
        @layer utilities {
            .text-shadow {
                text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
            }
            .animate-pulse-slow {
                animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
            }
            .animate-float {
                animation: float 3s ease-in-out infinite;
            }
            .animate-shake {
                animation: shake 0.5s;
            }
            .animate-damage {
                animation: damage 1s forwards;
            }
            .animate-heal {
                animation: heal 1s forwards;
            }
            .animate-flash {
                animation: flash 0.3s;
            }
        }
        
        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
            100% { transform: translateY(0px); }
        }
        
        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            20%, 60% { transform: translateX(-5px); }
            40%, 80% { transform: translateX(5px); }
        }
        
        @keyframes damage {
            0% { color: #EF4444; transform: scale(1); opacity: 1; }
            50% { transform: scale(1.5); opacity: 0.8; }
            100% { transform: translateY(-20px); opacity: 0; }
        }
        
        @keyframes heal {
            0% { color: #10B981; transform: scale(1); opacity: 1; }
            50% { transform: scale(1.5); opacity: 0.8; }
            100% { transform: translateY(-20px); opacity: 0; }
        }
        
        @keyframes flash {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }
    </style>
    
    <!-- 导入游戏字体 -->
    <!-- <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet"> -->
    <!-- 添加国内可用的字体链接 -->
    <!-- <link href="https://cdn.bootcdn.net/ajax/libs/PressStart2P/4.0.0/PressStart2P.css" rel="stylesheet"> -->

    <!-- 替换为本地字体CSS引用 -->
    <link rel="stylesheet" href="fonts/PressStart2P.css">

</head>
<body class="bg-background text-white min-h-screen overflow-x-hidden">
    <!-- 背景装饰 -->
    <div class="fixed inset-0 z-0 opacity-10">
        <div class="absolute top-10 left-10 w-40 h-40 rounded-full bg-fire blur-3xl"></div>
        <div class="absolute top-40 right-20 w-60 h-60 rounded-full bg-water blur-3xl"></div>
        <div class="absolute bottom-20 left-1/3 w-50 h-50 rounded-full bg-thunder blur-3xl"></div>
        <div class="absolute bottom-40 right-1/4 w-40 h-40 rounded-full bg-wind blur-3xl"></div>
    </div>

    <!-- 开局页面 -->
    <div id="start-screen" class="relative z-10 min-h-screen flex flex-col items-center justify-center p-4">
        <div class="text-center mb-10">
            <h1 class="text-[clamp(2rem,5vw,4rem)] font-game text-primary mb-4 animate-pulse-slow text-shadow">角色对战</h1>
            <p class="text-xl md:text-2xl max-w-2xl mx-auto">选择你的角色，与其他挑战者展开激烈对战！</p>
        </div>
        
        <div class="w-full max-w-4xl grid grid-cols-1 md:grid-cols-2 gap-6 mb-10">
            <div class="bg-card rounded-xl p-6 shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-primary/20 border border-primary/30">
                <h2 class="text-2xl font-bold mb-4 flex items-center">
                    <i class="fa fa-info-circle text-primary mr-2"></i>游戏说明
                </h2>
                <ul class="space-y-2">
                    <li class="flex items-start">
                        <i class="fa fa-check-circle text-secondary mt-1 mr-2"></i>
                        <span>选择一位角色进行多关卡挑战</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fa fa-check-circle text-secondary mt-1 mr-2"></i>
                        <span>每个角色拥有独特属性和4个技能</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fa fa-check-circle text-secondary mt-1 mr-2"></i>
                        <span>元素之间存在克制关系，影响伤害</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fa fa-check-circle text-secondary mt-1 mr-2"></i>
                        <span>击败所有对手，成为最终胜利者</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fa fa-check-circle text-secondary mt-1 mr-2"></i>
                        <span>技能耗尽且无法行动将被判负</span>
                    </li>
                </ul>
            </div>
            
            <div class="bg-card rounded-xl p-6 shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-primary/20 border border-primary/30">
                <h2 class="text-2xl font-bold mb-4 flex items-center">
                    <i class="fa fa-balance-scale text-primary mr-2"></i>元素克制
                </h2>
                <div class="grid grid-cols-2 gap-3">
                    <div class="flex items-center">
                        <span class="w-3 h-3 rounded-full bg-fire mr-2"></span>
                        <span>火 → 风、雷</span>
                    </div>
                    <div class="flex items-center">
                        <span class="w-3 h-3 rounded-full bg-water mr-2"></span>
                        <span>水 → 火、土</span>
                    </div>
                    <div class="flex items-center">
                        <span class="w-3 h-3 rounded-full bg-wind mr-2"></span>
                        <span>风 → 水、土</span>
                    </div>
                    <div class="flex items-center">
                        <span class="w-3 h-3 rounded-full bg-thunder mr-2"></span>
                        <span>雷 → 水、风</span>
                    </div>
                    <div class="flex items-center">
                        <span class="w-3 h-3 rounded-full bg-earth mr-2"></span>
                        <span>土 → 火、雷</span>
                    </div>
                    <div class="flex items-center">
                        <span class="w-3 h-3 rounded-full bg-light mr-2"></span>
                        <span>光 → 暗</span>
                    </div>
                </div>
                <p class="text-sm mt-3 text-gray-400">被克制的属性将受到1.5倍伤害</p>
            </div>
        </div>
        
        <button id="start-button" class="bg-primary hover:bg-primary/80 text-white font-bold py-3 px-8 rounded-lg text-lg transition-all duration-300 transform hover:scale-105 shadow-lg hover:shadow-primary/50 flex items-center">
            <i class="fa fa-play mr-2"></i> 开始游戏
        </button>
    </div>

    <!-- 角色选择页面 -->
    <div id="character-selection" class="relative z-10 min-h-screen p-4 hidden">
        <div class="text-center mb-8">
            <h1 class="text-3xl md:text-4xl font-bold mb-4">选择你的角色</h1>
            <p class="text-lg">每个角色都有独特的属性和技能</p>
        </div>
        
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto">
            <!-- 角色卡片将通过JS动态生成 -->
        </div>
        
        <div class="mt-10 text-center">
            <button id="back-to-start" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-6 rounded-lg transition-all duration-300 mr-4">
                <i class="fa fa-arrow-left mr-1"></i> 返回
            </button>
        </div>
    </div>

    <!-- 战斗场景 -->
    <div id="battle-screen" class="relative z-10 min-h-screen p-4 hidden">
        <!-- 顶部信息 -->
        <div class="flex justify-between items-center mb-4">
            <div>
                <h2 class="text-xl font-bold">关卡 <span id="current-level">1</span>/<span id="total-levels">5</span></h2>
                <p id="battle-status" class="text-secondary">准备战斗！</p>
            </div>
            <div>
                <button id="pause-button" class="bg-gray-700 hover:bg-gray-600 text-white p-2 rounded-lg transition-all">
                    <i class="fa fa-pause"></i>
                </button>
            </div>
        </div>
        
        <!-- 敌方信息、角色和技能 - 优化为同一行显示 -->
        <div class="mb-8">
            <div class="flex flex-col md:flex-row items-center md:items-center justify-between gap-4">
                <!-- 敌方属性信息 -->
                <div class="w-full md:w-1/4 bg-card rounded-lg p-4 border-2 border-gray-700">
                    <div class="flex justify-between items-center mb-2">
                        <h3 class="text-xl font-bold" id="enemy-name">-</h3>
                        <span class="px-3 py-1 rounded-full text-sm" id="enemy-element">-</span>
                    </div>
                    
                    <div class="mb-2">
                        <div class="flex justify-between text-sm mb-1">
                            <span>生命值</span>
                            <span id="enemy-hp-text">100/100</span>
                        </div>
                        <div class="w-full bg-gray-700 rounded-full h-3">
                            <div id="enemy-hp-bar" class="bg-hp h-3 rounded-full" style="width: 100%"></div>
                        </div>
                    </div>
                    
                    <div>
                        <div class="flex justify-between text-sm mb-1">
                            <span>技能值</span>
                            <span id="enemy-mp-text">50/50</span>
                        </div>
                        <div class="w-full bg-gray-700 rounded-full h-3">
                            <div id="enemy-mp-bar" class="bg-mp h-3 rounded-full" style="width: 100%"></div>
                        </div>
                    </div>
                </div>
                
                <!-- 敌方头像 -->
                <div class="w-full md:w-1/4 flex justify-center">
                    <div id="enemy-sprite" class="w-48 h-48 md:w-64 md:h-64 bg-card/50 rounded-full flex items-center justify-center animate-float">
                        <img src="" alt="敌方角色" class="max-w-full max-h-full p-4">
                    </div>
                </div>
                
                <!-- 敌方技能区域 - 移至头像右侧 -->
                <div class="w-full md:w-1/2">
                    <h4 class="text-center text-lg font-bold mb-2">敌方技能</h4>
                    <div class="grid grid-cols-2 gap-2" id="enemy-skills-container">
                        <!-- 敌方技能按钮将通过JS动态生成 -->
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 战斗信息区域 -->
        <div class="bg-card/80 rounded-lg p-4 h-32 overflow-y-auto mb-8 border border-gray-700">
            <ul id="battle-log" class="space-y-2 text-sm">
                <li class="text-gray-300">战斗即将开始！</li>
            </ul>
        </div>
        
        <!-- 我方信息和角色 -->
        <div class="flex flex-col md:flex-row items-center md:items-end justify-between gap-4">
            <!-- 我方技能区域 -->
            <div class="w-full md:w-1/2">
                <h4 class="text-center text-lg font-bold mb-2">我的技能</h4>
                <div class="grid grid-cols-2 gap-2">
                    <button class="skill-button bg-card hover:bg-primary/20 border border-gray-700 hover:border-primary rounded-lg p-3 transition-all text-left h-24 flex flex-col justify-between" data-skill="0">
                        <div class="flex justify-between items-start">
                            <span class="font-bold" data-skill-name>技能1</span>
                            <span class="text-xs bg-gray-700 px-1 rounded" data-skill-pp>5/5</span>
                        </div>
                        <span class="text-xs text-gray-400" data-skill-desc>技能描述</span>
                    </button>
                    <button class="skill-button bg-card hover:bg-primary/20 border border-gray-700 hover:border-primary rounded-lg p-3 transition-all text-left h-24 flex flex-col justify-between" data-skill="1">
                        <div class="flex justify-between items-start">
                            <span class="font-bold" data-skill-name>技能2</span>
                            <span class="text-xs bg-gray-700 px-1 rounded" data-skill-pp>5/5</span>
                        </div>
                        <span class="text-xs text-gray-400" data-skill-desc>技能描述</span>
                    </button>
                    <button class="skill-button bg-card hover:bg-primary/20 border border-gray-700 hover:border-primary rounded-lg p-3 transition-all text-left h-24 flex flex-col justify-between" data-skill="2">
                        <div class="flex justify-between items-start">
                            <span class="font-bold" data-skill-name>技能3</span>
                            <span class="text-xs bg-gray-700 px-1 rounded" data-skill-pp>5/5</span>
                        </div>
                        <span class="text-xs text-gray-400" data-skill-desc>技能描述</span>
                    </button>
                    <button class="skill-button bg-card hover:bg-primary/20 border border-gray-700 hover:border-primary rounded-lg p-3 transition-all text-left h-24 flex flex-col justify-between" data-skill="3">
                        <div class="flex justify-between items-start">
                            <span class="font-bold" data-skill-name>技能4</span>
                            <span class="text-xs bg-gray-700 px-1 rounded" data-skill-pp>5/5</span>
                        </div>
                        <span class="text-xs text-gray-400" data-skill-desc>技能描述</span>
                    </button>
                </div>
            </div>
            
            <!-- 我方头像 -->
            <div class="w-full md:w-1/4 flex justify-center">
                <div id="player-sprite" class="w-48 h-48 md:w-64 md:h-64 bg-card/50 rounded-full flex items-center justify-center animate-float">
                    <img src="" alt="玩家角色" class="max-w-full max-h-full p-4">
                </div>
            </div>
            
            <!-- 我方属性信息 -->
            <div class="w-full md:w-1/4 bg-card rounded-lg p-4 border-2 border-gray-700">
                <div class="flex justify-between items-center mb-2">
                    <h3 class="text-xl font-bold" id="player-name">-</h3>
                    <span class="px-3 py-1 rounded-full text-sm" id="player-element">-</span>
                </div>
                
                <div class="mb-2">
                    <div class="flex justify-between text-sm mb-1">
                        <span>生命值</span>
                        <span id="player-hp-text">100/100</span>
                    </div>
                    <div class="w-full bg-gray-700 rounded-full h-3">
                        <div id="player-hp-bar" class="bg-hp h-3 rounded-full" style="width: 100%"></div>
                    </div>
                </div>
                
                <div>
                    <div class="flex justify-between text-sm mb-1">
                        <span>技能值</span>
                        <span id="player-mp-text">50/50</span>
                    </div>
                    <div class="w-full bg-gray-700 rounded-full h-3">
                        <div id="player-mp-bar" class="bg-mp h-3 rounded-full" style="width: 100%"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 战斗结果弹窗 -->
    <div id="result-modal" class="fixed inset-0 bg-black/70 flex items-center justify-center z-50 hidden">
        <div class="bg-card rounded-xl p-8 max-w-md w-full mx-4 border-2 border-primary">
            <h2 id="result-title" class="text-2xl font-bold text-center mb-4">胜利！</h2>
            <p id="result-message" class="text-center mb-6">你成功击败了对手！</p>
            <div class="flex justify-center space-x-4">
                <button id="next-level" class="bg-primary hover:bg-primary/80 text-white font-bold py-2 px-6 rounded-lg transition-all">
                    下一关
                </button>
                <button id="restart-game" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-6 rounded-lg transition-all">
                    重新开始
                </button>
            </div>
        </div>
    </div>

    <!-- 暂停菜单 -->
    <div id="pause-menu" class="fixed inset-0 bg-black/70 flex items-center justify-center z-50 hidden">
        <div class="bg-card rounded-xl p-8 max-w-md w-full mx-4 border-2 border-primary">
            <h2 class="text-2xl font-bold text-center mb-6">游戏暂停</h2>
            <div class="flex flex-col space-y-3">
                <button id="resume-game" class="bg-primary hover:bg-primary/80 text-white font-bold py-3 px-6 rounded-lg transition-all">
                    继续游戏
                </button>
                <button id="restart-from-pause" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 px-6 rounded-lg transition-all">
                    重新开始
                </button>
                <button id="return-to-character" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 px-6 rounded-lg transition-all">
                    选择角色
                </button>
            </div>
        </div>
    </div>

    <script>
        // 游戏数据 - 角色定义
        const characters = [
            {
                id: 'oldbrother',
                name: 'oldbrother',
                element: 'earth',
                elementName: '土',
                hp: 150,
                mp: 40,
                description: '稳重的领导者，擅长防御和反击，拥有最高的生命值',
                // image: 'https://picsum.photos/id/1/300/300',
                image: 'wwwroot/test/photos/wenxin.png',
                skills: [
                    {
                        name: '大地冲击',
                        cost: 5,
                        power: 20,
                        pp: 8,
                        currentPp: 8,
                        description: '利用大地的力量攻击敌人',
                        type: 'attack'
                    },
                    {
                        name: '岩石壁垒',
                        cost: 8,
                        power: 0,
                        pp: 5,
                        currentPp: 5,
                        description: '提升自身防御，减少受到的伤害',
                        type: 'defense_up'
                    },
                    {
                        name: '地震',
                        cost: 10,
                        power: 30,
                        pp: 4,
                        currentPp: 4,
                        description: '引发地震，对敌人造成大量伤害',
                        type: 'attack'
                    },
                    {
                        name: '大地之愈',
                        cost: 12,
                        power: 30,
                        pp: 3,
                        currentPp: 3,
                        description: '从大地汲取能量恢复生命值',
                        type: 'heal'
                    }
                ]
            },
            {
                id: 'fanfan',
                name: '凡凡',
                element: 'fire',
                elementName: '火',
                hp: 120,
                mp: 50,
                description: '热情似火的攻击者，擅长高伤害技能',
                image: 'wwwroot/test/photos/wenxin.png',
                skills: [
                    {
                        name: '火焰喷射',
                        cost: 6,
                        power: 22,
                        pp: 7,
                        currentPp: 7,
                        description: '喷射火焰攻击敌人',
                        type: 'attack'
                    },
                    {
                        name: '燃烧殆尽',
                        cost: 15,
                        power: 50,
                        pp: 2,
                        currentPp: 2,
                        description: '释放全部火焰能量，造成巨大伤害但消耗大量MP',
                        type: 'attack'
                    },
                    {
                        name: '火焰屏障',
                        cost: 7,
                        power: 0,
                        pp: 4,
                        currentPp: 4,
                        description: '制造火焰屏障，有几率灼伤敌人',
                        type: 'burn'
                    },
                    {
                        name: '火焰强化',
                        cost: 8,
                        power: 0,
                        pp: 3,
                        currentPp: 3,
                        description: '提升火焰力量，增加自身攻击力',
                        type: 'attack_up'
                    }
                ]
            },
            {
                id: 'chengcheng',
                name: '成成',
                element: 'water',
                elementName: '水',
                hp: 130,
                mp: 60,
                description: '灵活的水属性角色，擅长控制和持续伤害',
                image: 'wwwroot/test/photos/wenxin.png',
                skills: [
                    {
                        name: '水流冲击',
                        cost: 5,
                        power: 20,
                        pp: 8,
                        currentPp: 8,
                        description: '用水流冲击敌人',
                        type: 'attack'
                    },
                    {
                        name: '水之束缚',
                        cost: 8,
                        power: 15,
                        pp: 5,
                        currentPp: 5,
                        description: '束缚敌人，造成伤害并降低其速度',
                        type: 'slow'
                    },
                    {
                        name: '海啸',
                        cost: 12,
                        power: 35,
                        pp: 3,
                        currentPp: 3,
                        description: '召唤海啸攻击敌人',
                        type: 'attack'
                    },
                    {
                        name: '水之治愈',
                        cost: 10,
                        power: 25,
                        pp: 4,
                        currentPp: 4,
                        description: '利用水的力量恢复生命值',
                        type: 'heal'
                    }
                ]
            },
            {
                id: 'taotao',
                name: '涛涛',
                element: 'thunder',
                elementName: '雷',
                hp: 110,
                mp: 70,
                description: '迅猛的雷属性角色，攻击速度快，有几率麻痹敌人',
                image: 'wwwroot/test/photos/wenxin.png',
                skills: [
                    {
                        name: '雷电打击',
                        cost: 6,
                        power: 21,
                        pp: 7,
                        currentPp: 7,
                        description: '释放雷电攻击敌人，有几率麻痹',
                        type: 'attack',
                        effect: 'paralyze'
                    },
                    {
                        name: '雷暴',
                        cost: 10,
                        power: 30,
                        pp: 4,
                        currentPp: 4,
                        description: '召唤雷暴，对敌人造成多次伤害',
                        type: 'attack'
                    },
                    {
                        name: '静电场',
                        cost: 8,
                        power: 0,
                        pp: 3,
                        currentPp: 3,
                        description: '制造静电场，提升自身速度和暴击率',
                        type: 'speed_up'
                    },
                    {
                        name: '雷霆万钧',
                        cost: 15,
                        power: 45,
                        pp: 2,
                        currentPp: 2,
                        description: '释放强大的雷电力量，必定造成暴击',
                        type: 'attack',
                        guaranteedCrit: true
                    }
                ]
            },
            {
                id: 'jiaojiao',
                name: '娇娇',
                element: 'wind',
                elementName: '风',
                hp: 100,
                mp: 80,
                description: '敏捷的风属性女性角色，擅长闪避和连击',
                image: 'wwwroot/test/photos/wenxin.png',
                skills: [
                    {
                        name: '风刃',
                        cost: 5,
                        power: 18,
                        pp: 10,
                        currentPp: 10,
                        description: '释放风刃切割敌人',
                        type: 'attack'
                    },
                    {
                        name: '旋风',
                        cost: 8,
                        power: 25,
                        pp: 6,
                        currentPp: 6,
                        description: '制造旋风，有几率使敌人混乱',
                        type: 'attack',
                        effect: 'confuse'
                    },
                    {
                        name: '风之舞',
                        cost: 7,
                        power: 0,
                        pp: 4,
                        currentPp: 4,
                        description: '跳风之舞，提升自身闪避率和速度',
                        type: 'evasion_up'
                    },
                    {
                        name: '狂风暴雨',
                        cost: 12,
                        power: 35,
                        pp: 3,
                        currentPp: 3,
                        description: '召唤狂风暴雨，对敌人进行多段攻击',
                        type: 'attack'
                    }
                ]
            },
            {
                id: 'wenxin',
                name: '文鑫',
                element: 'light',
                elementName: '光',
                hp: 120,
                mp: 60,
                description: '神圣的光属性角色，擅长治疗和净化',
                image: 'wwwroot/test/photos/wenxin.png',
                skills: [
                    {
                        name: '圣光冲击',
                        cost: 6,
                        power: 20,
                        pp: 7,
                        currentPp: 7,
                        description: '用圣光攻击敌人',
                        type: 'attack'
                    },
                    {
                        name: '治愈之光',
                        cost: 10,
                        power: 35,
                        pp: 4,
                        currentPp: 4,
                        description: '释放治愈之光恢复生命值',
                        type: 'heal'
                    },
                    {
                        name: '光之庇护',
                        cost: 8,
                        power: 0,
                        pp: 3,
                        currentPp: 3,
                        description: '获得光之庇护，免疫一次异常状态',
                        type: 'shield'
                    },
                    {
                        name: '神圣审判',
                        cost: 15,
                        power: 40,
                        pp: 2,
                        currentPp: 2,
                        description: '对敌人进行神圣审判，对邪恶属性造成额外伤害',
                        type: 'attack'
                    }
                ]
            }
        ];

        // 元素克制关系
        const elementAdvantages = {
            fire: ['wind', 'thunder'],
            water: ['fire', 'earth'],
            wind: ['water', 'earth'],
            thunder: ['water', 'wind'],
            earth: ['fire', 'thunder'],
            light: ['dark'],
            dark: ['light']
        };

        // 游戏状态
        const gameState = {
            player: null,
            enemy: null,
            currentLevel: 1,
            totalLevels: 5,
            isPlayerTurn: true,
            isGameOver: false,
            playerStatus: {},
            enemyStatus: {}
        };

        // DOM 元素
        const startScreen = document.getElementById('start-screen');
        const characterSelection = document.getElementById('character-selection');
        const battleScreen = document.getElementById('battle-screen');
        const resultModal = document.getElementById('result-modal');
        const pauseMenu = document.getElementById('pause-menu');
        
        const startButton = document.getElementById('start-button');
        const backToStartButton = document.getElementById('back-to-start');
        const nextLevelButton = document.getElementById('next-level');
        const restartGameButton = document.getElementById('restart-game');
        const pauseButton = document.getElementById('pause-button');
        const resumeGameButton = document.getElementById('resume-game');
        const restartFromPauseButton = document.getElementById('restart-from-pause');
        const returnToCharacterButton = document.getElementById('return-to-character');
        
        const battleLog = document.getElementById('battle-log');
        const battleStatus = document.getElementById('battle-status');
        const currentLevelElement = document.getElementById('current-level');
        const totalLevelsElement = document.getElementById('total-levels');
        
        const playerNameElement = document.getElementById('player-name');
        const playerElementElement = document.getElementById('player-element');
        const playerHpTextElement = document.getElementById('player-hp-text');
        const playerHpBarElement = document.getElementById('player-hp-bar');
        const playerMpTextElement = document.getElementById('player-mp-text');
        const playerMpBarElement = document.getElementById('player-mp-bar');
        const playerSpriteElement = document.getElementById('player-sprite').querySelector('img');
        
        const enemyNameElement = document.getElementById('enemy-name');
        const enemyElementElement = document.getElementById('enemy-element');
        const enemyHpTextElement = document.getElementById('enemy-hp-text');
        const enemyHpBarElement = document.getElementById('enemy-hp-bar');
        const enemyMpTextElement = document.getElementById('enemy-mp-text');
        const enemyMpBarElement = document.getElementById('enemy-mp-bar');
        const enemySpriteElement = document.getElementById('enemy-sprite').querySelector('img');
        const enemySkillsContainer = document.getElementById('enemy-skills-container');
        
        const resultTitleElement = document.getElementById('result-title');
        const resultMessageElement = document.getElementById('result-message');
        
        const skillButtons = document.querySelectorAll('.skill-button');

        // 初始化角色选择界面
        function initCharacterSelection() {
            const characterGrid = characterSelection.querySelector('.grid');
            characterGrid.innerHTML = '';
            
            characters.forEach(character => {
                const card = document.createElement('div');
                card.className = 'bg-card rounded-xl overflow-hidden shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-primary/20 border border-gray-700 hover:border-primary';
                
                const elementClass = `bg-${character.element}`;
                
                card.innerHTML = `
                    <div class="h-4 ${elementClass}"></div>
                    <div class="p-4">
                        <div class="flex justify-between items-start mb-3">
                            <h3 class="text-xl font-bold">${character.name}</h3>
                            <span class="px-2 py-1 rounded-full text-xs ${elementClass}">${character.elementName}</span>
                        </div>
                        <div class="flex justify-center mb-3">
                            <img src="${character.image}" alt="${character.name}" class="w-24 h-24 object-cover rounded-full">
                        </div>
                        <p class="text-sm text-gray-300 mb-3">${character.description}</p>
                        <div class="flex justify-between text-sm mb-4">
                            <div class="flex items-center">
                                <i class="fa fa-heart text-hp mr-1"></i>
                                <span>${character.hp}</span>
                            </div>
                            <div class="flex items-center">
                                <i class="fa fa-bolt text-mp mr-1"></i>
                                <span>${character.mp}</span>
                            </div>
                        </div>
                        <button class="select-character w-full bg-primary hover:bg-primary/80 text-white font-bold py-2 rounded-lg transition-all" data-character="${character.id}">
                            选择
                        </button>
                    </div>
                `;
                
                characterGrid.appendChild(card);
            });
            
            // 添加角色选择事件
            document.querySelectorAll('.select-character').forEach(button => {
                button.addEventListener('click', () => {
                    const characterId = button.getAttribute('data-character');
                    selectCharacter(characterId);
                });
            });
        }

        // 选择角色
        function selectCharacter(characterId) {
            // 找到选中的角色
            const selectedCharacter = characters.find(c => c.id === characterId);
            if (!selectedCharacter) return;
            
            // 复制角色数据，避免修改原始数据
            gameState.player = JSON.parse(JSON.stringify(selectedCharacter));
            gameState.currentLevel = 1;
            gameState.isGameOver = false;
            
            // 初始化战斗
            startBattle();
            
            // 切换到战斗界面
            characterSelection.classList.add('hidden');
            battleScreen.classList.remove('hidden');
        }

        // 开始战斗
        function startBattle() {
            // 重置状态
            gameState.playerStatus = {
                attack: 1,
                defense: 1,
                speed: 1,
                evasion: 0,
                paralyze: false,
                burn: false,
                confuse: false,
                shield: false
            };
            
            gameState.enemyStatus = {
                attack: 1,
                defense: 1,
                speed: 1,
                evasion: 0,
                paralyze: false,
                burn: false,
                confuse: false,
                shield: false
            };
            
            // 清空战斗日志
            battleLog.innerHTML = '';
            
            // 选择敌人 - 排除玩家选择的角色，难度随关卡提升
            const availableEnemies = characters.filter(c => c.id !== gameState.player.id);
            const randomIndex = Math.floor(Math.random() * availableEnemies.length);
            let enemy = JSON.parse(JSON.stringify(availableEnemies[randomIndex]));
            
            // 根据关卡调整敌人强度
            const levelMultiplier = 1 + (gameState.currentLevel - 1) * 0.3;
            enemy.hp = Math.round(enemy.hp * levelMultiplier);
            enemy.mp = Math.round(enemy.mp * levelMultiplier);
            enemy.skills.forEach(skill => {
                if (skill.type === 'attack') {
                    skill.power = Math.round(skill.power * levelMultiplier);
                } else if (skill.type === 'heal') {
                    skill.power = Math.round(skill.power * levelMultiplier);
                }
            });
            
            gameState.enemy = enemy;
            
            // 更新UI
            updateBattleUI();
            addToBattleLog(`第 ${gameState.currentLevel} 关开始！你的对手是 ${gameState.enemy.name}！`);
            
            // 检查谁先攻击
            checkFirstAttack();
        }

        // 检查谁先攻击
        function checkFirstAttack() {
            // 基础速度相同，玩家先攻
            gameState.isPlayerTurn = true;
            battleStatus.textContent = '你的回合';
            
            // 检查玩家是否有可用技能
            checkPlayerSkillsAvailability();
        }

        // 检查玩家是否有可用技能
        function checkPlayerSkillsAvailability() {
            if (!gameState.isPlayerTurn || gameState.isGameOver) return;
            
            // 检查是否有可用技能
            const hasAvailableSkills = gameState.player.skills.some(skill => 
                skill.currentPp > 0 && gameState.player.mp >= skill.cost
            );
            
            if (!hasAvailableSkills) {
                // 没有可用技能，玩家失败
                addToBattleLog('你已经没有可用的技能了！');
                gameState.isGameOver = true;
                setTimeout(() => {
                    endBattle(false);
                }, 1000);
            }
        }

        // 更新战斗UI
        function updateBattleUI() {
            // 更新玩家信息
            playerNameElement.textContent = gameState.player.name;
            playerElementElement.textContent = gameState.player.elementName;
            playerElementElement.className = `px-3 py-1 rounded-full text-sm bg-${gameState.player.element}`;
            playerHpTextElement.textContent = `${gameState.player.hp}/${gameState.player.maxHp || gameState.player.hp}`;
            playerHpBarElement.style.width = `${(gameState.player.hp / (gameState.player.maxHp || gameState.player.hp)) * 100}%`;
            playerMpTextElement.textContent = `${gameState.player.mp}/${gameState.player.maxMp || gameState.player.mp}`;
            playerMpBarElement.style.width = `${(gameState.player.mp / (gameState.player.maxMp || gameState.player.mp)) * 100}%`;
            playerSpriteElement.src = gameState.player.image;
            playerSpriteElement.alt = gameState.player.name;
            
            // 保存最大HP和MP（首次战斗时）
            if (gameState.player.maxHp === undefined) {
                gameState.player.maxHp = gameState.player.hp;
                gameState.player.maxMp = gameState.player.mp;
            }
            
            // 更新敌人信息
            enemyNameElement.textContent = gameState.enemy.name;
            enemyElementElement.textContent = gameState.enemy.elementName;
            enemyElementElement.className = `px-3 py-1 rounded-full text-sm bg-${gameState.enemy.element}`;
            enemyHpTextElement.textContent = `${gameState.enemy.hp}/${gameState.enemy.maxHp || gameState.enemy.hp}`;
            enemyHpBarElement.style.width = `${(gameState.enemy.hp / (gameState.enemy.maxHp || gameState.enemy.hp)) * 100}%`;
            enemyMpTextElement.textContent = `${gameState.enemy.mp}/${gameState.enemy.maxMp || gameState.enemy.mp}`;
            enemyMpBarElement.style.width = `${(gameState.enemy.mp / (gameState.enemy.maxMp || gameState.enemy.mp)) * 100}%`;
            enemySpriteElement.src = gameState.enemy.image;
            enemySpriteElement.alt = gameState.enemy.name;
            
            // 保存敌人最大HP和MP
            if (gameState.enemy.maxHp === undefined) {
                gameState.enemy.maxHp = gameState.enemy.hp;
                gameState.enemy.maxMp = gameState.enemy.mp;
            }
            
            // 更新关卡信息
            currentLevelElement.textContent = gameState.currentLevel;
            totalLevelsElement.textContent = gameState.totalLevels;
            
            // 更新技能按钮
            updateSkillButtons();
            updateEnemySkills();
        }

        // 更新玩家技能按钮 - 添加技能消耗信息
        function updateSkillButtons() {
            skillButtons.forEach((button, index) => {
                if (index >= gameState.player.skills.length) {
                    button.disabled = true;
                    return;
                }
                
                const skill = gameState.player.skills[index];
                const nameElement = button.querySelector('[data-skill-name]');
                const ppElement = button.querySelector('[data-skill-pp]');
                const descElement = button.querySelector('[data-skill-desc]');
                
                nameElement.textContent = skill.name;
                ppElement.textContent = `${skill.currentPp}/${skill.pp}`;
                // 在描述中添加消耗的MP值
                descElement.textContent = `${skill.description} (消耗: ${skill.cost} MP)`;
                
                // 禁用条件：没有PP或MP不足
                if (skill.currentPp <= 0 || gameState.player.mp < skill.cost) {
                    button.disabled = true;
                    button.classList.add('opacity-50', 'cursor-not-allowed');
                    button.classList.remove('hover:bg-primary/20', 'hover:border-primary');
                } else {
                    button.disabled = false;
                    button.classList.remove('opacity-50', 'cursor-not-allowed');
                    button.classList.add('hover:bg-primary/20', 'hover:border-primary');
                }
            });
        }

        // 更新敌人技能展示 - 添加技能消耗信息
        function updateEnemySkills() {
            enemySkillsContainer.innerHTML = '';
            
            if (!gameState.enemy || !gameState.enemy.skills) return;
            
            gameState.enemy.skills.forEach((skill, index) => {
                const button = document.createElement('div');
                button.className = 'bg-card border border-gray-700 rounded-lg p-3 text-left h-24 flex flex-col justify-between opacity-70';
                
                // 在描述中添加消耗的MP值
                button.innerHTML = `
                    <div class="flex justify-between items-start">
                        <span class="font-bold" data-skill-name>${skill.name}</span>
                        <span class="text-xs bg-gray-700 px-1 rounded" data-skill-pp>${skill.currentPp}/${skill.pp}</span>
                    </div>
                    <span class="text-xs text-gray-400" data-skill-desc>${skill.description} (消耗: ${skill.cost} MP)</span>
                `;
                
                enemySkillsContainer.appendChild(button);
            });
        }

        // 使用技能
        function useSkill(skillIndex, isPlayer = true) {
            const attacker = isPlayer ? gameState.player : gameState.enemy;
            const defender = isPlayer ? gameState.enemy : gameState.player;
            const attackerStatus = isPlayer ? gameState.playerStatus : gameState.enemyStatus;
            const defenderStatus = isPlayer ? gameState.enemyStatus : gameState.playerStatus;
            
            const skill = attacker.skills[skillIndex];
            
            // 检查技能是否可用
            if (skill.currentPp <= 0 || attacker.mp < skill.cost) {
                return false;
            }
            
            // 消耗MP和PP
            attacker.mp -= skill.cost;
            skill.currentPp--;
            
            // 记录攻击者名称用于日志
            const attackerName = isPlayer ? '你' : attacker.name;
            
            // 根据技能类型处理
            switch (skill.type) {
                case 'attack':
                    handleAttack(attacker, defender, attackerStatus, defenderStatus, skill, attackerName, isPlayer);
                    break;
                    
                case 'heal':
                    handleHeal(attacker, skill, attackerName);
                    break;
                    
                case 'attack_up':
                    handleStatBoost(attackerStatus, 'attack', 0.3, attackerName, '攻击力');
                    break;
                    
                case 'defense_up':
                    handleStatBoost(attackerStatus, 'defense', 0.3, attackerName, '防御力');
                    break;
                    
                case 'speed_up':
                    handleStatBoost(attackerStatus, 'speed', 0.3, attackerName, '速度');
                    break;
                    
                case 'evasion_up':
                    handleStatBoost(attackerStatus, 'evasion', 0.1, attackerName, '闪避率');
                    break;
                    
                case 'burn':
                    handleAttack(attacker, defender, attackerStatus, defenderStatus, skill, attackerName, isPlayer);
                    // 有30%几率灼伤敌人
                    if (Math.random() < 0.3) {
                        defenderStatus.burn = true;
                        addToBattleLog(`${defender.name}被灼伤了！`);
                    }
                    break;
                    
                case 'shield':
                    attackerStatus.shield = true;
                    addToBattleLog(`${attackerName}获得了光之庇护，能免疫一次异常状态！`);
                    break;
            }
            
            // 处理技能特效
            if (skill.effect) {
                handleSkillEffect(defender, defenderStatus, skill.effect, attackerName);
            }
            
            // 更新UI
            updateBattleUI();
            
            return true;
        }

        // 处理攻击
        function handleAttack(attacker, defender, attackerStatus, defenderStatus, skill, attackerName, isPlayer) {
            // 检查是否闪避
            if (Math.random() < defenderStatus.evasion) {
                addToBattleLog(`${defender.name}避开了攻击！`);
                return;
            }
            
            // 计算元素克制
            const advantage = elementAdvantages[attacker.element]?.includes(defender.element) || false;
            const disadvantage = elementAdvantages[defender.element]?.includes(attacker.element) || false;
            
            let multiplier = 1;
            if (advantage) {
                multiplier = 1.5;
            } else if (disadvantage) {
                multiplier = 0.7;
            }
            
            // 应用状态加成
            multiplier *= attackerStatus.attack;
            multiplier /= defenderStatus.defense;
            
            // 检查是否暴击 (10% 几率，或技能指定必定暴击)
            let isCritical = skill.guaranteedCrit || Math.random() < 0.1;
            if (isCritical) {
                multiplier *= 1.5;
            }
            
            // 计算最终伤害
            let damage = Math.round(skill.power * multiplier);
            damage = Math.max(1, damage); // 至少造成1点伤害
            
            // 应用伤害
            defender.hp -= damage;
            defender.hp = Math.max(0, defender.hp);
            
            // 添加战斗日志
            let logMessage = `${attackerName}使用了${skill.name}！`;
            
            if (advantage) {
                logMessage += `效果拔群！`;
            } else if (disadvantage) {
                logMessage += `效果不佳...`;
            }
            
            if (isCritical) {
                logMessage += `暴击！`;
            }
            
            logMessage += `${defender.name}受到了${damage}点伤害！`;
            
            addToBattleLog(logMessage);
            
            // 显示伤害动画
            const defenderSprite = isPlayer ? document.getElementById('enemy-sprite') : document.getElementById('player-sprite');
            defenderSprite.classList.add('animate-shake');
            setTimeout(() => {
                defenderSprite.classList.remove('animate-shake');
            }, 500);
            
            // 创建伤害数字动画
            const damageNumber = document.createElement('div');
            damageNumber.className = 'absolute text-white font-bold animate-damage';
            damageNumber.textContent = damage;
            defenderSprite.appendChild(damageNumber);
            
            setTimeout(() => {
                damageNumber.remove();
            }, 1000);
            
            // 检查是否击败
            if (defender.hp <= 0) {
                gameState.isGameOver = true;
                setTimeout(() => {
                    endBattle(isPlayer);
                }, 1000);
            }
        }

        // 处理治疗
        function handleHeal(character, skill, characterName) {
            const healAmount = skill.power;
            character.hp = Math.min(character.hp + healAmount, character.maxHp);
            
            addToBattleLog(`${characterName}使用了${skill.name}，恢复了${healAmount}点生命值！`);
            
            // 显示治疗动画
            const playerSprite = document.getElementById('player-sprite');
            const healNumber = document.createElement('div');
            healNumber.className = 'absolute text-white font-bold animate-heal';
            healNumber.textContent = `+${healAmount}`;
            playerSprite.appendChild(healNumber);
            
            setTimeout(() => {
                healNumber.remove();
            }, 1000);
        }

        // 处理状态提升
        function handleStatBoost(status, stat, amount, characterName, statName) {
            status[stat] += amount;
            addToBattleLog(`${characterName}的${statName}提升了！`);
        }

        // 处理技能特效
        function handleSkillEffect(target, targetStatus, effect, attackerName) {
            // 如果有护盾，免疫异常状态
            if (targetStatus.shield) {
                addToBattleLog(`${target.name}的护盾挡住了异常状态！`);
                targetStatus.shield = false;
                return;
            }
            
            switch (effect) {
                case 'paralyze':
                    if (Math.random() < 0.3 && !targetStatus.paralyze) {
                        targetStatus.paralyze = true;
                        addToBattleLog(`${target.name}被麻痹了，可能无法行动！`);
                    }
                    break;
                    
                case 'confuse':
                    if (Math.random() < 0.4 && !targetStatus.confuse) {
                        targetStatus.confuse = true;
                        addToBattleLog(`${target.name}陷入混乱状态！`);
                    }
                    break;
            }
        }

        // 处理状态效果（每回合）
        function handleStatusEffects(isPlayerTurn) {
            const affectedCharacter = isPlayerTurn ? gameState.enemy : gameState.player;
            const affectedStatus = isPlayerTurn ? gameState.enemyStatus : gameState.playerStatus;
            const characterName = isPlayerTurn ? gameState.enemy.name : '你';
            
            let hasEffect = false;
            
            // 处理灼伤
            if (affectedStatus.burn) {
                const burnDamage = Math.round(affectedCharacter.maxHp * 0.1);
                affectedCharacter.hp = Math.max(0, affectedCharacter.hp - burnDamage);
                addToBattleLog(`${characterName}受到灼伤影响，损失了${burnDamage}点生命值！`);
                hasEffect = true;
                
                // 检查是否因灼伤而倒下
                if (affectedCharacter.hp <= 0) {
                    gameState.isGameOver = true;
                    setTimeout(() => {
                        endBattle(!isPlayerTurn);
                    }, 1000);
                    return true;
                }
            }
            
            // 更新UI
            if (hasEffect) {
                updateBattleUI();
            }
            
            return false;
        }

        // 敌人AI
        function enemyTurn() {
            battleStatus.textContent = `${gameState.enemy.name}的回合`;
            
            // 检查敌人是否被麻痹
            if (gameState.enemyStatus.paralyze && Math.random() < 0.5) {
                addToBattleLog(`${gameState.enemy.name}被麻痹了，无法行动！`);
                setTimeout(() => {
                    gameState.isPlayerTurn = true;
                    battleStatus.textContent = '你的回合';
                    checkPlayerSkillsAvailability(); // 检查玩家技能可用性
                }, 1500);
                return;
            }
            
            // 检查敌人是否混乱
            if (gameState.enemyStatus.confuse && Math.random() < 0.3) {
                addToBattleLog(`${gameState.enemy.name}陷入混乱，攻击了自己！`);
                // 混乱状态下攻击自己
                const randomSkill = gameState.enemy.skills[Math.floor(Math.random() * gameState.enemy.skills.length)];
                if (randomSkill.type === 'attack') {
                    const damage = Math.round(randomSkill.power * 0.5);
                    gameState.enemy.hp = Math.max(0, gameState.enemy.hp - damage);
                    addToBattleLog(`${gameState.enemy.name}受到了${damage}点伤害！`);
                    updateBattleUI();
                    
                    // 检查是否击败自己
                    if (gameState.enemy.hp <= 0) {
                        gameState.isGameOver = true;
                        setTimeout(() => {
                            endBattle(true);
                        }, 1000);
                    }
                }
                
                setTimeout(() => {
                    gameState.isPlayerTurn = true;
                    battleStatus.textContent = '你的回合';
                    checkPlayerSkillsAvailability(); // 检查玩家技能可用性
                }, 1500);
                return;
            }
            
            // 简单AI逻辑：优先使用攻击技能，生命值低时使用治疗
            let possibleSkills = [];
            
            // 筛选可用技能
            gameState.enemy.skills.forEach((skill, index) => {
                if (skill.currentPp > 0 && gameState.enemy.mp >= skill.cost) {
                    possibleSkills.push(index);
                }
            });
            
            // 如果没有可用技能，敌人失败
            if (possibleSkills.length === 0) {
                addToBattleLog(`${gameState.enemy.name}没有可用技能了！`);
                gameState.isGameOver = true;
                setTimeout(() => {
                    endBattle(true);
                }, 1000);
                return;
            }
            
            // AI决策
            let chosenSkill = null;
            
            // 如果生命值低，优先治疗
            if (gameState.enemy.hp < gameState.enemy.maxHp * 0.3) {
                const healSkills = possibleSkills.filter(index => 
                    gameState.enemy.skills[index].type === 'heal'
                );
                
                if (healSkills.length > 0) {
                    chosenSkill = healSkills[Math.floor(Math.random() * healSkills.length)];
                }
            }
            
            // 如果没有选择治疗技能，随机选择一个攻击技能
            if (chosenSkill === null) {
                const attackSkills = possibleSkills.filter(index => 
                    gameState.enemy.skills[index].type === 'attack' ||
                    gameState.enemy.skills[index].type === 'burn'
                );
                
                if (attackSkills.length > 0) {
                    chosenSkill = attackSkills[Math.floor(Math.random() * attackSkills.length)];
                } else {
                    // 如果没有攻击技能，选择其他技能
                    chosenSkill = possibleSkills[Math.floor(Math.random() * possibleSkills.length)];
                }
            }
            
            // 使用选择的技能
            setTimeout(() => {
                useSkill(chosenSkill, false);
                
                // 如果游戏未结束，切换回玩家回合
                if (!gameState.isGameOver) {
                    setTimeout(() => {
                        gameState.isPlayerTurn = true;
                        battleStatus.textContent = '你的回合';
                        checkPlayerSkillsAvailability(); // 检查玩家技能可用性
                    }, 2000);
                }
            }, 1000);
        }

        // 结束战斗
        function endBattle(playerWon) {
            if (playerWon) {
                if (gameState.currentLevel >= gameState.totalLevels) {
                    // 通关所有关卡
                    resultTitleElement.textContent = '恭喜通关！';
                    resultMessageElement.textContent = `你成功击败了所有对手，成为了最终胜利者！`;
                    nextLevelButton.classList.add('hidden');
                } else {
                    // 胜利但未通关所有关卡
                    resultTitleElement.textContent = '胜利！';
                    resultMessageElement.textContent = `你成功击败了${gameState.enemy.name}！准备好挑战下一关了吗？`;
                    nextLevelButton.classList.remove('hidden');
                }
            } else {
                // 失败
                resultTitleElement.textContent = '战斗失败';
                resultMessageElement.textContent = `你被${gameState.enemy.name}击败了！再接再厉！`;
                nextLevelButton.classList.add('hidden');
            }
            
            // 显示结果弹窗
            resultModal.classList.remove('hidden');
        }

        // 添加战斗日志并自动滚动到底部 - 修复滚动问题
        function addToBattleLog(message) {
            const logItem = document.createElement('li');
            logItem.textContent = message;
            battleLog.appendChild(logItem);
            
            // 强制滚动到底部 - 使用更可靠的双重超时确保DOM已更新
            setTimeout(() => {
                battleLog.scrollTop = battleLog.scrollHeight;
            }, 0);
        }

        // 初始化事件监听
        function initEventListeners() {
            // 开始按钮
            startButton.addEventListener('click', () => {
                startScreen.classList.add('hidden');
                characterSelection.classList.remove('hidden');
            });
            
            // 返回按钮
            backToStartButton.addEventListener('click', () => {
                characterSelection.classList.add('hidden');
                startScreen.classList.remove('hidden');
            });
            
            // 技能按钮
            skillButtons.forEach((button, index) => {
                button.addEventListener('click', () => {
                    if (gameState.isPlayerTurn && !gameState.isGameOver) {
                        // 检查玩家是否被麻痹
                        if (gameState.playerStatus.paralyze && Math.random() < 0.5) {
                            addToBattleLog(`你被麻痹了，无法行动！`);
                            gameState.isPlayerTurn = false;
                            setTimeout(() => {
                                enemyTurn();
                            }, 1500);
                            return;
                        }
                        
                        // 检查玩家是否混乱
                        if (gameState.playerStatus.confuse && Math.random() < 0.3) {
                            addToBattleLog(`你陷入混乱，攻击了自己！`);
                            const randomSkill = gameState.player.skills[Math.floor(Math.random() * gameState.player.skills.length)];
                            if (randomSkill.type === 'attack' && randomSkill.currentPp > 0 && gameState.player.mp >= randomSkill.cost) {
                                const damage = Math.round(randomSkill.power * 0.5);
                                gameState.player.hp = Math.max(0, gameState.player.hp - damage);
                                addToBattleLog(`你受到了${damage}点伤害！`);
                                randomSkill.currentPp--;
                                gameState.player.mp -= randomSkill.cost;
                                updateBattleUI();
                                
                                // 检查是否击败自己
                                if (gameState.player.hp <= 0) {
                                    gameState.isGameOver = true;
                                    setTimeout(() => {
                                        endBattle(false);
                                    }, 1000);
                                    return;
                                }
                            }
                            
                            gameState.isPlayerTurn = false;
                            setTimeout(() => {
                                enemyTurn();
                            }, 1500);
                            return;
                        }
                        
                        // 使用技能
                        if (useSkill(index, true)) {
                            gameState.isPlayerTurn = false;
                            
                            // 如果游戏未结束，处理状态效果并进入敌人回合
                            if (!gameState.isGameOver) {
                                setTimeout(() => {
                                    const gameEnded = handleStatusEffects(true);
                                    if (!gameEnded) {
                                        enemyTurn();
                                    }
                                }, 1500);
                            }
                        }
                    }
                });
            });
            
            // 下一关按钮
            nextLevelButton.addEventListener('click', () => {
                resultModal.classList.add('hidden');
                gameState.currentLevel++;
                // 恢复部分MP和HP
                gameState.player.mp = Math.min(gameState.player.mp + 20, gameState.player.maxMp);
                gameState.player.hp = Math.min(gameState.player.hp + 30, gameState.player.maxHp);
                startBattle();
            });
            
            // 重新开始按钮
            restartGameButton.addEventListener('click', () => {
                resultModal.classList.add('hidden');
                battleScreen.classList.add('hidden');
                characterSelection.classList.remove('hidden');
            });
            
            // 暂停按钮
            pauseButton.addEventListener('click', () => {
                pauseMenu.classList.remove('hidden');
            });
            
            // 继续游戏按钮
            resumeGameButton.addEventListener('click', () => {
                pauseMenu.classList.add('hidden');
            });
            
            // 从暂停菜单重新开始
            restartFromPauseButton.addEventListener('click', () => {
                pauseMenu.classList.add('hidden');
                battleScreen.classList.add('hidden');
                characterSelection.classList.remove('hidden');
            });
            
            // 返回角色选择
            returnToCharacterButton.addEventListener('click', () => {
                pauseMenu.classList.add('hidden');
                battleScreen.classList.add('hidden');
                characterSelection.classList.remove('hidden');
            });
        }

        // 初始化游戏
        function initGame() {
            initCharacterSelection();
            initEventListeners();
        }

        // 启动游戏
        window.addEventListener('DOMContentLoaded', initGame);
    </script>
</body>
</html>
